import { editorMap } from "./rightEditorMap.js"
import { leftMap } from "./leftMenuMap.js"
class BGmap {
	// 页面数据
	constructor(){
		// 地图配置
		this.config
		// 当前组件挂载的vue对象
		this.VM = ''
		this.BM
		this.map
		// 自定义添加的数据
		this.customData = new Map()
		// 地图数据对象的储存
		this.mapDataLarey = new Map()
		// 地图是否经过编辑---true为经过过编辑，false为没有
		this.isMapEditor = false
	}
	// 初始化地图
	init(vue, Dom, config) {
		return new Promise((resolve, reject) => {
			// 绑定页面组件vue对象
			this.VM = vue
			this.BM = window.BM
			this.config = config
	        this.customDataClear()
			// 判断dom是否存在
			if (document.getElementById(Dom)) {
				this.BM.Config.HTTP_URL = config.mapUrl;
				// 实例化地图对象
				this.map = this.BM.map(document.getElementById(Dom), null, {
					center: config.initialCoordinates, // 地图中心点
					minZoom: 4, // 地图缩放最小级别
					zoom: config.zoom, // 地图开启缩放
					maxZoom: config.maxZoom, // 地图缩放最大级别
					zoomControl: false // 地图开启缩放按钮
				});
				//实例化地图图层
				const instantiationMap = this.BM.tileLayer(config.mapSource);
				// 将图层添加到地图上
				instantiationMap.addTo(this.map);
				// 循环自定义图层
				this.config.coverage.map(v => {
					//实例化地图图层
					let coverage = this.BM.tileLayer(v);
					coverage.addTo(this.map);
				})
				
				/// 返回到页面的数据
				const resolveData = {
					BM: this.BM,
					map: this.map
				}
				resolve(resolveData)
			}
		})
		
	}
	// 清空map集合的数据
	customDataClear(){
		this.customData.clear()
		this.mapDataLarey.clear()
	}
	// 返回map地图对象数据
	getMapObjData(){
		return new Promise((reslove, reject) => {
			if(this.BM && this.map){
				const resolveData = {
					BM: this.BM,
					map: this.map,
					config: this.config,
					customData: this.customData,
					isMapEditor: this.isMapEditor
				}
				reslove(resolveData)
			}
			
		})
	}
	// 得到地图初始化数据
	receiveMapInitData(data){
		// 如果有数据  ，，向地图渲染数据
		if(data && data.length > 0){
			data.forEach((v,i) => {
				if(!v.pId){
					v.pId = 'h1'
					v.pName = '我的图层'
				}
				if(!v.title){
					v.title = v.type+'#'+i
				}
				if(v.isShow === undefined || v.isShow === null){
					v.isShow = true
				}
				this.customData.set(v.id, v)
				// 如果是编辑状态，左部导航添加数据
				if (this.config.isOpenEditor) {
					leftMap.sendToPageMapData(v)
				}
			})
			
			setTimeout(()=>{
				if(this.customData.size > 0){
					this.applyColoursToDrawing()
				}
			},300)
		}
	}
	// 渲染地图数据
	applyColoursToDrawing(){
		this.customData.forEach(v => {
			this.applyColoursToDrawingFunc(v)
		})
	}
	
	// 渲染单个地图数据
	applyColoursToDrawingOne(data){
		this.applyColoursToDrawingFunc(data)
	}
	// 渲染地图数据方法
	applyColoursToDrawingFunc(v){
		// 判断数据类型
		switch (v.type) {
			case 'marker':
				// 标注
				let marker = this.BM.marker(v.latLng).addTo(this.map);
				if (v.content !== '') {
					marker.bindPopup(v.content);
				}
				let myIcon = BM.icon({
				    iconUrl: v.markerIcon,
				    iconSize: [32,32],
				});
				marker.setIcon(myIcon)
				if(v.title){
					marker.closeTooltip().bindTooltip(v.title, {direction:'bottom',permanent:true,className:'my_tooltip'})
				} else {
					marker.closeTooltip()
				}
				
				
				
				this.originalDataAddFunction(marker, v)
				break;
			case 'polyline':
				// 线段
				let polyline = this.BM.polyline(v.latLng, v.options).addTo(this.map);
				polyline.isShowArea = v.isShowArea
				this.originalDataAddFunction(polyline, v)
				let distance = newBigeMap.calculationDistance(v.latLng, polyline)
				// polyline.bindTooltip('长:' + distance + 'km', {permanent:true})
				v.length = distance
				v.unit = 'm'
				break;
			case 'polygon':
				// 多边形
				let polygon = this.BM.polygon(v.latLng, v.options).addTo(this.map);
				polygon.isShowArea = v.isShowArea
				this.originalDataAddFunction(polygon, v)
				let areas = newBigeMap.calculateArea(v.latLng, polygon)
				v.area = areas
				v.unit = '㎡'
				break;
			case 'rectangle':
				// 矩形
				let rectangle = this.BM.rectangle(v.latLng, v.options).addTo(this.map);
				rectangle.isShowArea = v.isShowArea
				this.originalDataAddFunction(rectangle, v)
				let rectangleareas = newBigeMap.calculateArea(v.latLng, rectangle)
				// rectangle.bindTooltip('面积:' + rectangleareas + 'k㎡', {permanent:true})
				v.area = rectangleareas
				v.unit = '㎡'
				break;
			case 'circle':
				// 圆
				let circle = this.BM.circle(v.latLng, v.options).addTo(this.map);
				circle.isShowArea = v.isShowArea
				this.originalDataAddFunction(circle, v)
				let circleareas = this.circleArea(v.latLng, circle)
				v.area = circleareas.data
				v.unit = '㎡'
				v.radius = circleareas.R
				v.radiusUnit = 'm'
				break;
		}
	}
	
	// 为原始数据添加事件
	originalDataAddFunction(layer, data) {
		layer.id = data.id
		layer.type = data.type
		layer.isLocation = data.isLocation
		if (data.isLocation) {
			// 让地图适配当前的线段
			if (data.type === 'marker') {
				this.map.flyToBounds([data.latLng]);
			} else {
				 this.map.flyToBounds(layer.getBounds());
			}
		}
		this.mapDataLarey.set(data.id, layer)
		// 如果是编辑状态，为原始数据添加点击事件
		if (this.config.isOpenEditor) {
			editorMap.bindMapClick(layer, this.map)
		}
	}
	// 移动地图到指定位置并增加缩放级别
	flyTo(latLng, zoom = 13) {
		this.map.flyTo(latLng, zoom)
	}
	// 计算面积
	calculateArea(latLngs, layer){
		let pointsCount = latLngs.length,
			area = 0.0,
			d2r = Math.PI / 180,
			p1, p2;
	
		if (pointsCount > 2) {
			for (var i = 0; i < pointsCount; i++) {
				p1 = latLngs[i];
				p2 = latLngs[(i + 1) % pointsCount];
				area += ((p2.lng - p1.lng) * d2r) *
					(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
			}
			area = area * 6378137.0 * 6378137.0 / 2.0;
		}
		let areas = Math.abs(area)
		let result = Math.round(areas)
		
		console.log(layer.isShowArea)
		
		// 设置是否显示面积
		if(layer.isShowArea){
			// 显示
			layer.closeTooltip().bindTooltip('面积:' + result + '㎡');
		}
		// console.log(layer.isShowArea)
		return result;
	}
	// 计算周长
	calculationPerimeter(latLngs, layer){
		let perimeter = 0
		let lengthList = []
		if(layer.type == 'rectangle'){
			// 矩形
			let lengthOfSide = this.map.distance(latLngs[0],latLngs[1]),
				lengthOfSide1 = this.map.distance(latLngs[1],latLngs[2])
				
			perimeter = Math.round((lengthOfSide1 + lengthOfSide) * 2)
		} else {
			// 多边形
			latLngs.forEach((v, i)=>{
				if(i < latLngs.length - 1){
					lengthList.push(this.map.distance(latLngs[i],latLngs[i+1]))
				}
			})
			// 最后一个点到第一个点的距离
			lengthList.push(this.map.distance(latLngs[latLngs.length - 1],latLngs[0]))
			
			lengthList.forEach(d=>{
				perimeter += Number(d)
			})
			perimeter = Math.round(perimeter)
		}
		return perimeter
	}
	// 计算距离
	calculationDistance(latLngs, layer){
		let result = 0
		let distance = []
		latLngs.forEach((v, i)=>{
			if(i <= latLngs.length - 2){
				distance.push(this.map.distance(latLngs[i],latLngs[i+1]))
			}
		})
		distance.forEach(d=>{
			result += Number(d)
		})
		let data = Math.round(result)
		if(layer.isShowArea){
			// 显示
			layer.closeTooltip().bindTooltip('长:' + data + 'm')
		}
		return data
	}
	// 圆的面积计算
	circleArea(latLngs, layer){
		let data = 0,
			perimeter = 0,
			PI = Math.PI,// 圆周率
			R = 0;
			// 获取圆的半径
			let getR = layer.getRadius()
			R = Math.round(getR)
			// console.log(R)
			// 计算面积
			data = Math.round((PI * Number(R) * Number(R)))
			// 计算周长
			perimeter =  Math.round(2 * PI * Number(R))
			// 设置是否显示面积
			if(layer.isShowArea){
				// 显示
				layer.closeTooltip().bindTooltip('面积:' + data + '㎡, '+'半径:'+R+'m')
			}
		return {
			data,
			R,
			perimeter
		}
	}
	// 获取地图数据的所有图层面积
	getAreas(callback){
		let callbackData = []
		let totalArea = 0
		let units = '㎡'
		this.customData.forEach(v => {
			if(v.type == 'polygon' || v.type == 'rectangle'){
				// 如果是多边形或者矩形
				const pr = {
					area: v.area, // 面积
					id: v.id, // id
					pId: v.pId, // 图层id
					pName: v.pName, // 图层名称
					unit: v.unit, // 面积单位
					title: v.title, // 图层名称
					varietyId: v.variety, // 品种ID
					customVariety: v.customVariety,// 自定义品种名称
					varietyIndex: v.varietyIndex, // 品种下标
					type: v.type // 图层类型
				}
				callbackData.push(pr)
			} else if(v.type == 'circle'){
				// 如果是圆
				const c = {
					area: v.area, // 面积
					id: v.id, // id
					pId: v.pId, // 图层id
					pName: v.pName, // 图层名称
					unit: v.unit, // 面积单位
					title: v.title, // 图层名称
					type: v.type ,// 图层类型
					varietyId: v.variety, // 品种ID
					customVariety: v.customVariety,// 自定义品种名称
					varietyIndex: v.varietyIndex, // 品种下标
					radius: v.radius ,// 图层半径
					radiusUnit: v.radiusUnit // 半径单位
				}
				callbackData.push(c)
			}
		})
		// 计算返回图层面积的总和
		callbackData.forEach(v=>{
			totalArea += Number(v.area)
		})
		
		const returnData = {
			areaList: callbackData,
			totalArea,
			units
		}
		callback(returnData)
	}
}
export const newBigeMap = new BGmap()
export function loadingFunc(url) {
		// let url = url
		// console.log(url)
		const js = [
			`${url}/bigemap.js/v2.1.0/bigemap.js`,
			`${url}/bigemap-gl.js/v1.1.0/bigemap-gl.js`,
			'./mapEdit/bm.draw.min.js',
			'./mapEdit/bm.measure.js'
		]
		const css = [
			`${url}/bigemap.js/v2.1.0/bigemap.css`,
			`${url}/bigemap-gl.js/v1.1.0/Widgets/widgets.css`,
			'./mapEdit/Bigemap.draw.css',
			'./mapEdit/bm.measure.css'
		]
		return new Promise((reslove, reject) => {
			// 加载css
			let link = css.map(v => {
				let css = document.createElement("link");
				css.rel = "stylesheet";
				css.async = false;
				css.href = v;
				document.head.appendChild(css);
			});
			// 加载js
			let script = js.map(v => {
				let js = document.createElement("script");
				js.type = "text/javascript";
				js.async = false;
				js.src = v;
				document.head.appendChild(js);
				return js;
			});
			let end = script.pop();
			end.onload = reslove;
		})
	}
	
	
	
	
	